<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>好券直播</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>

    <style>
        .aui-chat{
            overflow: hidden;
            width: 25rem;
        }
        .aui-chat-item .aui-chat-content{
          overflow: hidden;
          background: #fff;
          border-radius: 5px;
          padding: 0
        }
        .aui-chat-content .aui-chat-arrow{
          background: #fff;
          z-index: -1;
        }
        .item_content{
          padding:10px;
          background: #fff;
          display: flex;
          flex-wrap:wrap;
          align-items: center;
          justify-content: space-between;
        }
        .item_content .title {
          font-size: 16px;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 5px;
          font-weight: bold;
        }
        .item_content .title_content {
          font-size: 12px;
          width: 100%;
          margin-bottom: 5px;
          color:#000;
        }

        .item_content .volume{
            font-size: 12px;
            padding: 2px 15px;
            background: red;
            color:#fff;
            position: relative;
            overflow: hidden;
        }
        .item_content .volume::before{
            content: ' ';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            left: -2.5px;
            top:50%;
            margin-top: -2.5px
        }
        .item_content .volume::after{
            content: ' ';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            right: -2.5px;
            top:50%;
            margin-top: -2.5px
        }
        .aui-content{
          background-image: url(" ../image/good_back.png ");
        }
    </style>
</head>

<body>
    <section class="aui-refresh-content">
        <div class="aui-content">
            <div id='template'>
            </div>
        </div>
    </section>
</body>
<script type="text/javascript">
    var photoBrowser,min_idVal='1',renderLi;
    apiready = function () {

      photoBrowser = api.require('photoBrowser');
      renderLi = doT.template($api.text($api.byId('templateLimit')));

      api.addEventListener({
          name: 'scrolltobottom',
          extra: {
              threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
          }
      }, function (ret, err) {
          console.log('上拉刷新')
          getData(true)
      })
      getData();
    };

    var pullRefresh = new auiPullToRefresh({
        container: document.querySelector('.aui-refresh-content'),
        triggerDistance: 100
    }, function (ret) {
        if (ret.status == "success") {
            console.log('下拉加载过往')
            setTimeout(function () {
                getData();
                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
            }, 1500)
        }
    })

    function getData(bool) {
      if(bool){
        min_idVal='1'
      }
      var urlTransform = window.urlTransformZGD(window.APIServerZGD.VideoGuide, {
          typeVal: '10', //类别
          backVal: '10', //分页条目
          sortVal: '0',
          cidVal: '1',
          min_idVal: min_idVal
      })
      _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
          if (ret.code === 1) {
              var _data = ret.data

              for (var i = 0; i < _data.length; i++) {
                  _data[i].item_id =  _data[i].itemid
                  _data[i].is_tmall =  _data[i].shoptype == 'B' ? '1' : '0'
              }
              if(bool){
                $api.html($api.byId('template'), '');
                $api.append($api.byId('template'), renderLi(_data));
              }else{
                $api.prepend($api.byId('template'), renderLi(_data));
              }
              min_idVal = ret.min_id
              //console.log(JSON.stringify(_data))
          } else {
              console.log(JSON.stringify(ret.msg))
          }
      });
    }

    function LookImg(imageUrl){
      photoBrowser.open({
        images: [
          imageUrl
        ],
        placeholderImg: imageUrl,
        bgColor: '#000'
      }, function(ret, err) {
        if (ret) {
          if(ret.eventType == 'click'){
            photoBrowser.close();
          }
        }
      });
    }
</script>
<script id="templateLimit" type="text/x-dot-template">
    {{ for (var key in it){ }}
    {{ var param=it[key]['itempic']; }}
    <section class="aui-chat" tapmode>
        <div class="aui-chat-item aui-chat-left" style='width:70%;'>
            <div class="aui-chat-media">
            {{= it[key]['shoptype'] == 'B' ? '<img src="../image/tmall.png">':'<img src="../image/taobao.png">' }}
            </div>
            <div class="aui-chat-inner">
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    <img onclick='LookImg({{= JSON.stringify(param) }})' src={{= it[key]['itempic']+'_500x500.jpg' }} />
                </div>
            </div>
        </div>
        <div class="aui-chat-item aui-chat-left">
            <div class="aui-chat-media">
            {{= it[key]['shoptype'] == 'B' ? '<img src="../image/tmall.png">':'<img src="../image/taobao.png">' }}
            </div>
            <div class="aui-chat-inner" onclick='open_goods({{= JSON.stringify( it[key] ) }})'>
                <div class="aui-chat-content">
                    <div class="aui-chat-arrow"></div>
                    <div class="item_content">
                      <div class="title">{{= it[key]['itemtitle'] }}</div>
                      <div class="volume">{{= it[key]['couponmoney'] }}元券</div>
                      <div class="title_content">{{= it[key]['itemdesc'] }}</div>
                      <div>
                        <span style="font-size:10px;color:red;margin-right:5px;">券后价:<span style="font-size:14px">¥{{= it[key]['itemendprice'] }}</span></span>
                        <span style="font-size:10px;color:#ccc">原价:<span style="font-size:12pxtext-decoration:line-through;">¥{{= it[key]['itemprice'] }}</span></span>
                      </div>
                      <div style="font-size:10px;color:#ccc">发布时间：{{= formatDateTime(it[key]['starttime']* 1000 )}}</div>
                    </div>
                    <div style="background:red;width:100%;color:#fff;text-align: center;">前往领券购买</div>
                </div>
            </div>
        </div>
    </section>




    {{ } }}
</script>
</html>
